import React from 'react';
import {Table, Button, Card, Form, Input, Popconfirm,Select,Radio} from 'antd';
import moment from 'moment';
import NotificationService from '../../service/NotificationService';
import StudentService from '../../service/StudentService';
const Option = Select.Option;
const RadioGroup = Radio.Group;
export default class NotificationList extends React.Component {

    state = {
        title:'Notification列表',
        data: [],
        pagination: {pageSize: 10, current: 1,size:'middle'},
        pagStart: {pageSize: 10, current: 1,size:'middle'},
        search: '',
        //列表加载
        tableLoading: false,
        departmentList : [],//下拉框查询数据
        searchParam : {},
        tableList:[],
        loading:false,
        studentList:[]
    };

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.fetch(this.state.pagination);
        this.fetchStudent();
    }

    //查询方法
    fetch(pagination) {
        console.log('pagination.......',pagination);
        this.setState({
            loading: true,
        });
        let pager = {
            query: this.state.search,
            page: pagination.current - 1,
            size: pagination.pageSize,
            current: pagination.current,
            //sort:['receiptDate', 'DESC']
        };
        console.log('pager.......',pager);
        NotificationService.getList(pager).done(data=>{
            console.log('data',data.entity);
            if (data.entity) {
                this.setState({
                    tableList: data.entity,
                    loading: false,
                    pagination: {
                        total: parseInt(data.headers['X-Total-Count']),
                        pageSize: this.state.pagination.pageSize,
                        current: pager.current
                    }
                })
            }
        })
    }
    fetchStudent(){
        StudentService.getList({size: 1000}).done((res)=>{
            this.setState({studentList:res.entity})
        })
    }

    //查询方法
    searchClick() {
        let search = '';
        let params = this.state.searchParam;

        if (params.id) {
            if (params.id != '0') {
                search += 'targetUserId=='+params.id+';';
            }
        }
        if(params.type) {
            if (params.type === '0') {
                search += 'targetUserId=='+params.type+';';
            }
        }
        if (params.content) {
            search ? search += "" : search = "";
            search += 'content=like='+params.content+';';
        }
        this.state.search = search;
        this.fetch(this.state.pagStart);
    }

    render() {
        return (
            <Card title={this.state.title} className="user" extra={<a onClick={()=>{
                this.props.history.push("/notification/add");
            }}>+新增</a>}>
                <Form layout="inline" style={{marginBottom:'20px'}}>

                    <Form.Item layout="inline" label={'通知模式：'}>
                    <RadioGroup  onChange={(e)=>{
                            this.state.searchParam.type = e.target.value;;
                            this.forceUpdate();
                    }}>
                        <Radio checked={ this.state.searchParam.type === "-1" ? true : false } value="-1">全部</Radio>
                        <Radio checked={ this.state.searchParam.type === "0" ? true : false } value="0">全员通知</Radio>
                    </RadioGroup>

                    </Form.Item>
                <Form.Item layout="inline" label={'个人通知账号：'}>
                    <Input placeholder={"请输入账号"} value={this.state.searchParam.id} onChange={(e)=>{
                        this.state.searchParam.id = e.target.value;
                        this.forceUpdate();
                    }}/>
                </Form.Item>
                <Form.Item label={'内容：'}>
                    <Input placeholder="内容关键字"
                           onChange={(e)=>{
                               console.log(e.target.value);
                               this.state.searchParam.content = e.target.value
                           }}
                    />
                </Form.Item>
                <Form.Item>
                    <Button
                        type="primary"
                        icon="search"
                        onClick={()=>{
                            this.searchClick();
                        }}
                    >搜索</Button>
                </Form.Item>
                </Form>
                <Table
                    rowKey={record => record.id}
                    bordered={true}
                    loading={this.state.loading}
                    dataSource={this.state.tableList}
                    columns={[
                        {title:"通知账号", align:'center', dataIndex: 'targetUserId', key: 'targetUserId'},
                        {title:"内容", align:'center', dataIndex: 'content', key: 'content'},
                        {title:"发布时间", align:'center', dataIndex: 'createTime', key: 'createTime', width:200,render : (text, record) => {
                            return (
                                <span>{record.createTime?moment(record.createTime).format('YYYY/MM/DD HH:mm:ss'):''}</span>
                            )
                        }},
                        {title:"操作", align:'center', dataIndex: 'operation', key: 'operation',
                            render : (text, record) => {
                                return (
                                    <div className='btn-cen-div'>
                                        <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否确定删除?" onConfirm={() =>{
                                            NotificationService.deleteOne(record.id).done(()=>{
                                                this.fetch(this.state.pagination);
                                            })
                                        }}>
                                            <a>删除</a>
                                        </Popconfirm>
                                    </div>
                                )
                            }
                        },
                    ]}
                    pagination={this.state.pagination}
                    onChange={this.fetch.bind(this)}
                />
            </Card>
        )
    }
}